<template>
  <div class="chat-group-container">
    <n-scrollbar class="chat-group-list">
      <div v-for="room in chatRoom" :key="room.id" class="item-container">
        <n-avatar round :size="40" :src="room.avatar" />
        <div class="item-content">
          <p>{{ room.name }}</p>
          <p>
            <n-ellipsis :tooltip="false" style="max-width: 200px">
              {{ lastMessage?.userInfo.username ?
              `${lastMessage?.userInfo.username}: ${lastMessage?.content}` :
              `欢迎来聊天呢~` }}
            </n-ellipsis>
          </p>
        </div>
        <span class="item-time">
          {{ lastMessage?.sendTime ? computeTime(Date.parse(lastMessage?.sendTime)) : '' }}
        </span>
      </div>
    </n-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useImChatStore } from "@/store/modules/imchat";
import { computeTime } from "@/utils/dateUtil";

const imchatStore = useImChatStore()
// @ts-ignore
const {
  getLastMessage: lastMessage,
  getChatRoomList: chatRoom
} = storeToRefs(imchatStore)

</script>

<style lang="less" scoped>
.chat-group-container {
  height: 100%;
  overflow-y: hidden;
  background-color: #E5E4E4;
  border-radius: 10px;

  :deep(.n-scrollbar) {
    box-sizing: border-box;
    padding: 0 10px;
  }

  .chat-group-list {
    height: 100%;

    .item-container {
      height: 60px;
      display: flex;
      justify-content: flex-start;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 10px;
      position: relative;
      margin-top: 5px;
      user-select: none;

      &:hover {
        cursor: pointer;
        background-color: #D8D7D7;
      }
    }

    .item-content {
      margin-left: 5px;

      p {
        margin: 0;
        padding: 0;
      }

      & p:first-child {
        font-size: 15px;
      }

      & p:not(p:first-child) {
        font-size: 13px;
      }
    }

    .item-time {
      position: absolute;
      right: 10px;
      font-size: 10px;
      top: 15px;
    }
  }
}
</style>
